<template>
    <div>
        <div class="title-container" v-if="$slots.header">
            <slot name="header" :username="username"></slot>
        </div>
        <h3>子组件</h3>
        <slot></slot>
        <slot name="footer"></slot>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const username = ref('李四');
</script>

<style scoped>
.title-container {
    background-color: cornflowerblue;
    height: 50px;
}
</style>